<template>
  <KView class="address-form">
    <address-picker-cell v-model="addressForm.addressCode" title="收货地址:" :title-width="140" placeholder="点击选择"></address-picker-cell>
    <sys-cell nowarp v-model="addressForm.buyerAddress" title="门牌号:" :title-width="140" placeholder="详情地址，例如：16号楼5层501室" type="textarea"
      :textarea-height="76">
    </sys-cell>
    <sys-cell v-model="addressForm.buyerName" title="联系人:" :title-width="140" placeholder="请填写收货人姓名"></sys-cell>

    <sys-cell title="" :title-width="140">
      <KView slot="content" class="address-form-checkbox clearfix">
        <sys-checkbox :value="addressForm.sex===1" :has-change="false" @click="sexChange(1)">先生</sys-checkbox>
        <sys-checkbox :value="addressForm.sex===0" :has-change="false" @click="sexChange(0)">女士</sys-checkbox>
      </KView>
    </sys-cell>
    <sys-cell v-model="addressForm.buyerPhone" title="手机号:" :title-width="140" input-type="number" placeholder="请填写收货人手机号"></sys-cell>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import AddressForm from 'models/goodsPayment/addressForm';
  import GoodsPaymentApi from 'services/goodsPaymentApi';

  import SysCell from 'common/sysCell';
  import SysCheckbox from 'common/sysCheckbox';
  import AddressPickerCell from 'common/addressPickerCell';

  export default {
    props: {
      type: {
        type: String,
        default: 'add'
      },
      address: {
        type: Object,
        default: () => null
      }
    },

    data() {
      let addressForm;
      if (this.type === 'add') {
        addressForm = new AddressForm();
      } else {
        addressForm = new AddressForm(this.address);
      }
      return {
        addressForm
      };
    },

    methods: {
      sexChange(sex) {
        let addressForm = this.addressForm;
        if (addressForm.sex !== sex) {
          addressForm.sex = sex;
        }
      },

      saveAddress() {
        let addressForm = this.addressForm;
        let code = addressForm.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`goodsOrder.addressForm.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return;
        }

        if (this.type === 'add') {
          this.addAddress(addressForm);
        } else {
          this.updateAddress(addressForm);
        }
      },

      addAddress(addressForm) {
        SystemUtil.showLoading('提交中...');
        GoodsPaymentApi.addAddress(addressForm).then(() => {
          SystemUtil.hideLoading();
          this.$emit('save-success');
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      updateAddress(addressForm) {
        SystemUtil.showLoading('提交中...');
        GoodsPaymentApi.updateAddress(addressForm).then(() => {
          SystemUtil.hideLoading();
          this.$emit('save-success');
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      }
    },

    components: {
      SysCell,
      SysCheckbox,
      AddressPickerCell
    }
  };

</script>

<style lang="scss">
  .address-form {
    height: 100%;
    overflow: auto;

    .address-form-checkbox {
      height: formatPx(40);
      padding: formatPx(4) 0;

      .sys-checkbox {
        float: left;
        width: auto;

        .sys-checkbox-text {
          line-height: formatPx(40);
          font-size: formatPx(28);
        }
      }

      .sys-checkbox+.sys-checkbox {
        margin-left: formatPx(50);
      }
    }
  }

</style>
